<template>
	<div class="work-container">
		<el-form ref="form" label-width="120px">

			<el-form-item label="作业分类" required>
				<el-select v-model="selectedworkid" placeholder="请选择作业分类" @change="selectedworktype">
					<el-option v-for="item in worktype" :key="item.worktypeid" :label="item.worktypename" :value="item.worktypeid">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item :label="stype == 'kc' ? '课程/分类' : '主题分类'" required>
				<el-select style="width: 400px" v-model="mindClazzId" placeholder="请选择课程" @change="handleChange"
					v-if="stype == 'kc'">
					<el-option v-for="item in kc_list" :key="item.mindClazzId" :label="item.mindClazzName"
						:value="item.mindClazzId"></el-option>
				</el-select>
				<el-select style="width: 400px" v-model="mindTypeId" placeholder="请选择主题分类" v-if="stype == 'ca'"
					@change="getMindByType">
					<el-option v-for="item in mindType_list" :key="item.mindTypeId" :label="item.mindTypeName"
						:value="item.mindTypeId"></el-option>
				</el-select>
				<el-radio-group v-model="stype" @change="clearExamList">
					<el-radio-button label="kc">课程</el-radio-button>
					<el-radio-button label="ca">主题分类</el-radio-button>
				</el-radio-group>
				<!-- <span class="error_validator" v-show="!mindClazzId">请选择 {{ stype == 'kc' ? '课程' : '主题分类' }}</span> -->
			</el-form-item>
			<el-form-item :label="stype == 'kc' ? '章节/名称' : '精神谱系'" required>
				<el-select style="width: 400px" v-model="mindId" placeholder="请选择主题分类" @change="mindIdHandleChange"
					v-if="stype == 'ca'">
					<el-option v-for="item in cate_inner_list" :key="item.mindId" :label="item.mindName"
						:value="item.mindId"></el-option>
				</el-select>

				<template v-if="stype == 'kc'">
					<el-select style="min-width: 200px;" v-model="firstChapter" placeholder="请选择章"
						@change="chapterChange">
						<el-option v-for="item in chapter_list" :key="item.chapterId" :label="item.chapterName"
							:value="item.chapterId"></el-option>
					</el-select>

					<template v-if="second_level">
						<span style="margin: 0 20px; font-size: 20px;">
							<i class="el-icon-right"></i>
						</span>
						<el-select style="width: 200px" v-model="secondChapter" placeholder="请选择节"
							@change="secondChapterChange">
							<el-option v-for="item in second_list" :key="item.id" :label="item.chapterName"
								:value="item.id"></el-option>
						</el-select>
					</template>
					<template v-if="third_level">
						<span style="margin: 0 20px; font-size: 20px;">
							<i class="el-icon-right"></i>
						</span>
						<el-select style="width: 200px" v-model="thirdChapter" placeholder="请选择小节"
							@change="thirdChapterChange">
							<el-option v-for="item in third_list" :key="item.id" :label="item.chapterName"
								:value="item.id"></el-option>
						</el-select>
					</template>

					<!-- <span class="error_validator" v-show="!firstChapter">请选择章节</span> -->
				</template>

				<el-button style="margin-left: 10px;background-color:#a60e0a;border: none;" type="primary"
					@click="showHomeworkBox">浏览</el-button>

				<el-dialog title="作业:" :visible.sync="homeworkBrowserVisable" width="80%" :lock-scroll="true"
					:append-to-body="false" id="homeworkBrowserVisable">
					<div>
						<el-form ref="form" :model="form" label-width="80px">
							<el-form-item :label="stype == 'kc' ? '课程' : '主题分类'" required>
								<el-select style="width: 400px" v-model="mindClazzId" placeholder="请选择课程"
									@change="handleChange" v-if="stype == 'kc'" disabled>
									<el-option v-for="item in kc_list" :key="item.mindClazzId"
										:label="item.mindClazzName" :value="item.mindClazzId"></el-option>
								</el-select>
								<el-select style="width: 400px" v-model="mindTypeId" placeholder="请选择主题分类"
									v-if="stype == 'ca'" @change="getMindByType" disabled>
									<el-option v-for="item in mindType_list" :key="item.mindTypeId"
										:label="item.mindTypeName" :value="item.mindTypeId"></el-option>
								</el-select>
								<!-- <el-radio-group v-model="stype">
                  <el-radio-button label="kc" >课程</el-radio-button>
                  <el-radio-button label="ca" >主题分类</el-radio-button>
                </el-radio-group> -->
								<!-- <span class="error_validator" v-show="!mindClazzId">请选择 {{ stype == 'kc' ? '课程' : '主题分类' }}</span> -->
							</el-form-item>
							<el-form-item :label="stype == 'kc' ? '章节选择' : '精神谱系'" required>
								<el-select style="width: 400px" v-model="mindId" placeholder="请选择主题分类"
									@change="mindIdHandleChange" v-if="stype == 'ca'" disabled>
									<el-option v-for="item in cate_inner_list" :key="item.mindId" :label="item.mindName"
										:value="item.mindId"></el-option>
								</el-select>

								<template v-if="stype == 'kc'">
									<el-select style="min-width: 200px;" v-model="firstChapter" placeholder="请选择章"
										@change="chapterChange" disabled>
										<el-option v-for="item in chapter_list" :key="item.chapterId"
											:label="item.chapterName" :value="item.chapterId"></el-option>
									</el-select>

									<template v-if="second_level">
										<span style="margin: 0 20px; font-size: 20px;">
											<i class="el-icon-right"></i>
										</span>
										<el-select style="width: 200px" v-model="secondChapter" placeholder="请选择节"
											@change="secondChapterChange" disabled>
											<el-option v-for="item in second_list" :key="item.id"
												:label="item.chapterName" :value="item.id"></el-option>
										</el-select>
									</template>
									<template v-if="third_level">
										<span style="margin: 0 20px; font-size: 20px;">
											<i class="el-icon-right"></i>
										</span>
										<el-select style="width: 200px" v-model="thirdChapter" placeholder="请选择小节"
											@change="thirdChapterChange" disabled>
											<el-option v-for="item in third_list" :key="item.id"
												:label="item.chapterName" :value="item.id"></el-option>
										</el-select>
									</template>

									<!-- <span class="error_validator" v-show="!firstChapter">请选择章节</span> -->
								</template>
							</el-form-item>
						</el-form>
						<div class="exam_list">
							<div class="exam-item" v-for="(item, i) in exam_test_list" :key="i">
								<div style="display: flex;width: 100%;">
									<div class="exam-title">
										<el-checkbox v-model="checkWorkList" :label="item.id">&nbsp;</el-checkbox>
										{{ i + 1 }}:
									</div>
									<div class="exam-content">
										<span style="font-weight: bolder;" v-if="item.type == 1">(单选题)</span>
										<span style="font-weight: bolder;" v-if="item.type == 2">(多选题)</span>
										<span style="font-weight: bolder;" v-if="item.type == 3">(判断题)</span>
										{{ item.title }}
									</div>
								</div>
								<div style="display: flex;width: 100%;margin-top: 10px;"
									v-if="item.type == 1 || item.type == 2">
									<div class="exam-title">选项:</div>
									<div class="exam-content" style="text-indent: 0; margin-top: 13px;">
										<p style="line-height: 1;" v-for="(option, index) in item.choose" :key="index">
											<span>{{ xuanxiang[index] }}</span>:
											<span>{{ option }}</span>
										</p>
									</div>
								</div>
								<div class="exam-item-answers">
									<div class="exam-item-title">答案:</div>
									<div style="display: flex; align-items: center;">
										<div v-if="item.type == 1">
											{{ xuanxiang[item.answer[0] - 1] }}
										</div>
										<div v-else-if="item.type == 2">
											<span v-for="ite in item.answer" :key="ite">{{ xuanxiang[ite - 1] }}</span>
										</div>
										<div v-else-if="item.type == 3">
											{{ item.answer[0] == 1 ? '√' : '×' }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="homeworkBrowserVisable = false">关闭</el-button>
					</span>
				</el-dialog>

			</el-form-item>

			<el-form-item label="起止时间" required>
				<el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" @change="timeChange" style="width: 50%">
				</el-date-picker>
				<!-- <span class="error_validator" v-show="!form.date">请选择起止时间</span> -->
			</el-form-item>
			<el-form-item label="参与班级" required>
				<el-select v-model="selectedDepa" placeholder="请选择院系" @change="selectDepa">
					<el-option v-for="item in depaList" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
				<el-select v-model="selectedProf" placeholder="请选择专业" @change="selectProf">
					<el-option v-for="item in profList" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
				<el-select v-model="selectedGrade" placeholder="请选择级别" @change="selectGrade">
					<el-option v-for="item in gradeList" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
				<div style="height:15px;" v-if="clazzList.length > 0"></div>
				<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllClazz"
					v-if="clazzList.length > 0">全选</el-checkbox>
				<div style="margin: 15px 0;" v-if="clazzList.length > 0"></div>
				<el-checkbox-group v-model="checkedClazzList" @change="checkClazz">
					<el-checkbox v-for="item in clazzList" :label="item.clazzId" :value="item.value"
						:key="item.clazzId">{{ item.clazzName }}</el-checkbox>
				</el-checkbox-group>
				<div>
					<!-- <span class="error_validator" v-show="!checkedClazzList.length">请选择参与班级</span> -->
				</div>
			</el-form-item>
			<el-form-item label="作业说明">
				<el-input type="textarea" v-model="remark"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="homeworkIssued" style="float: right;background-color:#a60e0a;border: none;"
					type="primary">作业下发</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				selectedworkid:"",
				mindTypeId: "",
				mindId: "",
				cate_inner_list: [],
				stype: 'kc',
				homeworkBrowserVisable: false,

				selectedDepa: "",
				selectedProf: "",
				selectedGrade: "",
				depaList: [],
				profList: [],
				gradeList: [],

				clazzList: [],
				checkedClazzList: [],
				isIndeterminate: false,
				checkAll: false,

				kc_list: [],
				chapter_list: [],
				second_level: false,
				second_list: [],
				third_level: false,
				third_list: [],
				checkWorkList: [],

				mindClazzId: "",
				firstChapter: "",
				secondChapter: "",
				thirdChapter: "",
				exam_test_list: [],
				xuanxiang: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
				pageNo: 1,
				pageSize: 10,

				type: 1,
				startTime: null,
				endTime: null,
				remark: "",

				worktype: [{
					worktypeid:0,
					worktypename:'思政课程',
				},{
					worktypeid:1,
					worktypename:'精神谱系',
				} ,{
					worktypeid:2,
					worktypename:'全景思政',
				},{
					worktypeid:3,
					worktypename:'VR仿真',
				}]

			};
		},
		created() {
			this.getAllDepaList();
			this.getMindClazzList();
		},
		methods: {
			selectedworktype(e){
				console.log('////',e)
			},
			clearExamList() {
				this.exam_test_list = [];
				this.firstChapter = "";
				this.second_level = "";
				this.form.date = {};
				this.checkWorkList = [];
				this.mindClazzId = "";
				this.mindTypeId = "";
				this.mindId = "";
				this.firstChapter = "";
				this.secondChapter = "";
				this.thirdChapter = "";
				this.second_level = false;
				this.third_level = false;
			},
			thirdChapterChange() {
				this.getTestDetailByClazz();
			},
			mindIdHandleChange() {
				this.getTestDetailByClazz();
			},
			timeChange(time) {
				this.startTime = this.dateFormat(time[0], "yyyy-MM-dd HH:mm:ss");
				this.endTime = this.dateFormat(time[1], "yyyy-MM-dd HH:mm:ss");
			},
			getMindByType() {
				this.mindId = "";
				const {
					mindTypeId
				} = this;
				if (!mindTypeId) return;
				this.$http.ajax(this.$http.getMindByType, {
					mindTypeId,
					pageNo: 1,
					pageSize: 9999
				}, res => {
					if (res.code == 0) {
						if (res.result && res.result.records.length !== 0) {
							this.cate_inner_list = res.result.records;
						}
					}
				});
			},
			getMindClazzList() {
				this.$http.ajax(this.$http.getMindClazzListSecond, {}, res => {
					if (res.code == 0) {
						if (res.result && res.result.length !== 0) {
							this.kc_list = res.result;
						}
					}
				});
				this.$http.ajax(this.$http.getMindType, {
					pageNo: 1,
					pageSize: 9999
				}, res => {
					if (res.code == 0) {
						if (res.result && res.result.records.length !== 0) {
							this.mindType_list = res.result.records;
						}
					}
				});
			},
			handleChange() {
				this.second_level = false;
				this.second_list = [];
				this.secondChapter = "";
				this.firstChapter = "";
				this.chapter_list = [];
				this.third_list = [];
				this.third_level = false;
				this.thirdChapter = "";
				this.getFirstChapter();
			},
			secondChapterChange(chapterId) {
				this.getTestDetailByClazz();
				const arr = this.second_list.filter(item => item.id == chapterId);
				if (arr.length != 0 && arr[0].isEnd == 0) {
					this.third_level = true;
				} else if (arr.length != 0 && arr[0].isEnd == 1) {
					// this.getTestDetailByClazz();
					return this.third_level = false;
				}

				this.$http.ajax(
					this.$http.getChildChapter, {
						chapterId
					},
					(res) => {
						this.third_list = res.result;
					}
				);
			},
			chapterChange(chapterId) {
				this.second_level = false;
				this.second_list = [];
				this.secondChapter = "";
				this.third_level = false;
				this.third_list = [];
				this.thirdChapter = "";

				this.getTestDetailByClazz();

				const arr = this.chapter_list.filter(item => item.chapterId == chapterId);
				if (arr.length != 0 && arr[0].isEnd == 0) {
					this.second_level = true;
				} else if (arr.length != 0 && arr[0].isEnd == 1) {
					// this.getTestDetailByClazz();
					return (this.second_level = false);
				}
				this.$http.ajax(this.$http.getChildChapter, {
					chapterId
				}, res => {
					this.second_list = res.result;
				});
			},
			getFirstChapter() {
				const {
					mindClazzId
				} = this;
				if (!mindClazzId && mindClazzId != 0)
					return;
				this.$http.ajax(this.$http.getFirstChapter, {
					mindClazzId
				}, res => {
					this.chapter_list = res.result;
				});
			},

			// 下发作业
			homeworkIssued() {
				if (this.checkedClazzList.length === 0) {
					this.$message({
						type: "error",
						message: "请选择班级",
						offset: 150
					});
					return;
				}
				if (this.checkWorkList.length === 0) {
					this.$message({
						type: "error",
						message: "请选择试题",
						offset: 150
					});
					return;
				}
				if ((this.stype == 'kc' ? this.mindClazzId : this.mindTypeId) &&
					this.startTime &&
					this.endTime &&
					this.checkWorkList.length != 0 &&
					this.checkedClazzList.length != 0
				) {

					var classIds = this.checkedClazzList.map(item => "##" + item).join("") + "##";
					var testIds = this.checkWorkList.map(item => "##" + item).join("") + "##";
					var chapterId = chapterId;
					if (this.stype == 'kc') {
						chapterId = this.thirdChapter || this.secondChapter || this.firstChapter;
					}


					this.$http.ajax(
						this.$http.commitWork, {
							type: this.stype == 'kc' ? 1 : 2,
							// type: 2,
							typeId: this.stype == 'kc' ? chapterId : this.mindId,
							startTime: this.startTime,
							endTime: this.endTime,
							classIds: classIds,
							remark: this.remark,
							testIds: testIds
						},
						res => {
							if (res.code == 0) {
								this.stype = "kc";
								this.form.date = {};
								this.checkedClazzList = [];
								this.checkWorkList = [];
								this.remark = "";
								this.mindClazzId = "";
								this.mindTypeId = "";
								this.mindId = "";
								this.firstChapter = "";
								this.secondChapter = "";
								this.thirdChapter = "";
								this.second_level = false;
								this.third_level = false;
								this.selectedDepa = "";
								this.selectedProf = "";
								this.selectedGrade = "";
								this.isIndeterminate = false;
								this.clazzList = [];
							}
						}
					);
				} else {
					this.$message({
						type: "warning",
						message: "请检查必填项",
						offset: 150
					});
				}


			},

			getTestDetailByClazz() {
				const {
					pageNo,
					pageSize,
					mindId
				} = this;
				if (this.stype == 'kc') {
					this.$http.ajax(
						this.$http.getTestDetailByClazz, {
							pageNo,
							pageSize: 9999,
							chapterId: this.thirdChapter || this.secondChapter || this.firstChapter,
							// chapterId: 26 
						},
						res => {
							if (res.code == 0) {
								if (!res.result) {
									this.checkWorkList = [];
									this.exam_test_list = [];
									return this.$message({
										type: "error",
										message: "此课程暂未上传试题",
										offset: 150
									});
								}
								this.checkWorkList = res.result.records.map(item => item.id);
								this.exam_test_list = res.result.records;
							} else if (res.code == 400) {
								this.$message.error(res.msg);
							}
						}
					);
				} else if (this.stype == 'ca') {
					this.$http.ajax(
						this.$http.getTestDetailByMind, {
							pageNo,
							pageSize: 9999,
							mindId
						},
						res => {
							if (res.code == 0) {
								if (!res.result) return this.$message({
									type: "error",
									message: "此课程暂未上传试题",
									offset: 150
								});
								this.checkWorkList = res.result.records.map(item => item.id);
								this.exam_test_list = res.result.records;
							} else if (res.code == 400) {
								this.$message.error(res.msg);
							}
						});
				}
			},

			showHomeworkBox() {
				const {
					mindClazzId,
					firstChapter,
					second_level,
					secondChapter
				} = this;
				if (this.stype == 'kc') {
					if (!mindClazzId) {
						this.$message.closeAll();
						return this.$message({
							type: "warning",
							message: "请选择课程",
							offset: 150
						});
					} else if (!firstChapter) {
						this.$message.closeAll();
						return this.$message({
							type: "warning",
							message: "请选择章节",
							offset: 150
						});
					}
					/*
					if (second_level && !secondChapter) {
					  this.$message.closeAll();
					  return this.$message({
					    type: "warning",
					    message: "请选择小节",
					    offset: 150
					  });
					}
					*/
				} else if (this.stype == 'ca') {
					if (!this.mindTypeId) {
						this.$message.closeAll();
						return this.$message({
							type: "warning",
							message: "请选择主题内容",
							offset: 150
						});
					}
					if (!this.mindId) {
						this.$message.closeAll();
						return this.$message({
							type: "warning",
							message: "请选择精神谱系",
							offset: 150
						});
					}
				}
				// 获取 试题 方法 后 展示弹窗 显示对应的题目列表
				this.homeworkBrowserVisable = true;
				this.$nextTick(() => {
					setTimeout(() => {
						document.querySelector("#homeworkBrowserVisable").style.zIndex =
							"9999999";
						document.querySelector(".v-modal").style.zIndex = "99999";
					}, 200);
				});

			},
			// 根据教师和专业列出所有班级
			getAllClazzList(depa, prof, grade) {
				let that = this;
				that.$http.ajax(
					that.$http.getAllClazzList, {
						depa: depa,
						prof: prof,
						grade: grade
					},
					function(res) {
						that.clazzList = res.result;
					}
				);
			},
			// 获取所有院系
			getAllDepaList() {
				let that = this;
				that.$http.ajax(that.$http.getAllDepaList, {}, function(res) {
					that.depaList = res.result;
				});
			},
			// 选择院系
			selectDepa(val) {
				let that = this;
				that.selectedProf = "";
				that.selectedGrade = "";
				// that.checkedClazzList=[];//选中的班级
				that.clazzList = []; // 班级列表
				that.isIndeterminate = false; // 班级全选的不确定状态
				that.checkAll = false; // 班级全选
				if (val == "选课") {
					that.profList[0] = "选课";
					that.selectedProf = "选课";
					that.selectedGrade = "选课";
					this.getAllClazzList("选课", "选课", "");
				} else {
					that.getAllProfList(that.selectedDepa);
					this.getAllClazzList(
						this.selectedDepa,
						this.selectedProf,
						this.selectedGrade
					);
				}
			},
			// 选择专业
			selectProf(val) {
				this.getAllClazzList(
					this.selectedDepa,
					this.selectedProf,
					this.selectedGrade
				);
				this.getAllGradeList(this.selectedDepa, this.selectedProf);
				this.selectedGrade = "";
			},
			// 选择年级
			selectGrade(val) {
				this.getAllClazzList(
					this.selectedDepa,
					this.selectedProf,
					this.selectedGrade
				);
			},
			// 获取教师班级的专业
			getAllProfList(depa) {
				let that = this;
				that.$http.ajax(that.$http.getAllProfList, {
					depa: depa
				}, function(res) {
					that.profList = res.result;
				});
			},
			// 获取教师选择的年级
			getAllGradeList(depa, prof) {
				let that = this;
				that.$http.ajax(
					that.$http.getAllGradeList, {
						depa: depa,
						prof: prof
					},
					function(res) {
						that.gradeList = res.result;
					}
				);
			},
			// 选中班级
			checkClazz(val) {
				// console.log(this.checkedClazzList);//this.checkedClazzList 就是选中的班级的数组，下发任务时用来传递班级信息
				if (
					this.checkedClazzList.length != this.clazzList.length &&
					this.checkedClazzList.length != 0
				) {
					this.isIndeterminate = true;
				} else if (this.checkedClazzList.length == 0) {
					this.isIndeterminate = false;
					this.checkAll = false;
				} else if (this.checkedClazzList.length == this.clazzList.length) {
					this.isIndeterminate = false;
					this.checkAll = true;
				}
			},
			// 班级全选
			checkAllClazz(val) {
				let clazzList = [];
				this.clazzList.forEach(function(item, index) {
					clazzList[index] = item.clazzId;
				});
				this.checkedClazzList = val ? clazzList : [];
				this.isIndeterminate = false;
			}
		}
	};
</script>

<style lang="scss">
	.work {
		&-container {
			width: 100%;
			padding: 20px 20px;

			.el-radio-button.is-active {
				.el-radio-button__inner {
					background-color: rgb(166, 14, 10);
					border-color: rgb(166, 14, 10);
					color: #fff;
				}

				&:hover {
					.el-radio-button__inner {
						color: #fff;
					}
				}
			}

			.el-radio-button {
				color: #000;

				.el-radio-button__inner {
					box-shadow: -1px 0 0 0 rgb(166, 14, 10);
				}

				&:hover .el-radio-button__inner {
					color: rgb(166, 14, 10);
				}
			}
		}
	}

	.exam {
		&-list {}

		&-item {
			display: flex;
			margin-bottom: 20px;
			flex-wrap: wrap;
		}

		&-title {
			width: 85px;
			text-align: right;
			font-size: 15px;
			font-weight: 600;
		}

		&-content {
			flex: 1;
			padding: 0 10px;
			font-weight: bold;
		}
	}

	.exam {
		&-container {
			border: 1px solid #eee;
			border-radius: 10px;
			padding: 10px 15px;
		}

		&-list {
			text-align: left;
		}

		&-item {
			margin-bottom: 30px;

			&-options,
			&-answers {
				text-indent: 1.5em;
				display: flex;
				align-items: center;
			}

			&-answers {
				margin-top: 10px;
			}

			&-option {
				flex: 1;
				display: flex;
				align-items: center;
				overflow: hidden;
			}

			&-title {
				text-align: right;
				width: 90px;
				margin-right: 10px;
				font-weight: bolder;
				font-size: 16px;
			}
		}

		&-checkbox-group {
			display: flex;
			align-items: center;
			margin-left: -50px;
		}

		&-checkbox {
			margin-right: 30px;
			width: 50px;

			.el-checkbox__label {
				padding: 0;
			}
		}

		&-radio-group {
			margin-left: -40px;
			display: flex;
			align-items: center;
		}

		&-radio {
			margin-right: 30px;
			width: 50px;
		}
	}

	.tr {
		text-align: right;
	}
</style>
